<template>
<el-dialog
        v-model="projectDetailWinDialogVisible"
        title="项目详情"
        width="50%"
>
    <template #default>
        <el-descriptions >
            <el-descriptions-item label="项目编号">{{project.projectId}}</el-descriptions-item>
            <el-descriptions-item label="项目名称">{{project.projectName}}</el-descriptions-item>
            <el-descriptions-item label="管理者">{{project.user.username}}</el-descriptions-item>
            <el-descriptions-item label="状态">
                    <el-tag type="info" v-if="project.projectStatus == 1">草稿</el-tag>
                    <el-tag type="primary" v-else-if="project.projectStatus == 2">发布</el-tag>
                    <el-tag type="warning" v-else-if="project.projectStatus == 3">暂停</el-tag>
                    <el-tag type="danger" v-else-if="project.projectStatus == 4">意外</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="开始时间">
                {{project.startTime}}
            </el-descriptions-item>
            <el-descriptions-item label="结束时间">
                {{project.endTime}}
            </el-descriptions-item>
            <el-descriptions-item label="项目说明" aria-colcount="3">
                <div v-html="project.projectDesc"></div>
            </el-descriptions-item>
        </el-descriptions>
        <el-table border stripe :data="tasks">
            <el-table-column label="编号"/>
            <el-table-column label="任务名称"/>
            <el-table-column label="负责人"/>
            <el-table-column label="开始时间"/>
            <el-table-column label="结束时间"/>
            <el-table-column label="工期"/>
            <el-table-column label="状态"/>
        </el-table>
    </template>
    <template #footer>
        <el-button @click="projectDetailWinDialogVisible = false">关闭</el-button>
    </template>
</el-dialog>
</template>

<script setup>
import { ref, watch} from "vue";
import projectRequest from "@/api/project.js";
// 申明组件的属性
const props = defineProps(['projectId']);
// 弹窗标记
let projectDetailWinDialogVisible = ref(false);
// 详情对象
let project = ref({})
// 通过id加载
function loadProjectById(){
    projectRequest.getProjectById(props.projectId,res=>{
        if(res.data){
            project.value = res.data;
            projectDetailWinDialogVisible.value = true;
        }
    });
}
// 属性侦听
watch(()=>props.projectId,()=>{
    if(props.projectId){
        loadProjectById();
    }
});

</script>
<style scoped>

</style>